<template>
  <div ref="chartRef" style="width: 100%; height: 400px;"></div>
  // 在 DOM 元素上添加 ref="xxx"，表示 “给这个元素起一个引用名 xxx”：在 script中可以通过 chartRef.value 直接访问该 DOM 元素

</template>

<script setup>
import { ref, onMounted, onUnmounted } from 'vue';
import * as echarts from 'echarts';

const chartRef = ref(null);
let chartInstance = null;

// 生命周期钩子：组件挂载后初始化图表
onMounted(async () => {
  // 1. 创建ECharts实例
  chartInstance = echarts.init(chartRef.value);
  // 2. 从后端获取数据
  const response = await uni.request({
      url: 'http://172.16.24.120:5000/mysqlchart/get_test_data',
	  method: 'POST'
  });
  console.log(response.data)
  // 3. 配置图表选项
  const options = {
	//声明一个 X 轴，类目轴（category）。默认情况下，类目轴对应到 dataset 第一列。
    xAxis: { 
		type: 'category', 
		data: response.data.labels 
		},
	// 声明一个 Y 轴，数值轴。
    yAxis: { type: 'value' },
	// 声明多个 bar 系列，默认情况下，每个系列会自动对应到 dataset 的每一列。
    series: [
		{
		// 纵轴数据在这里定义，可以传一个数组列表  饼图传入namevalue键值字典
		  data: response.data.values,
		  type: 'line',
		  color: '#165DFF',
		  smooth: true,
		  areaStyle: {
			color: {
			  type: 'linear',
			  x: 0, y: 0, x2: 0, y2: 1,
			  colorStops: [{
				offset: 0, color: 'rgba(54, 162, 235, 0.4)' // 0% 处的颜色
			  }, {
				offset: 1, color: 'rgba(54, 162, 235, 0)' // 100% 处的颜色
			  }]
			}
		  }
		},
	// 图二
		{
		  data: response.data.values,
		  type: 'bar',
		  color: '#aaff7f'
		},
	//图三
		{
		  data: response.data.values,
		  type: 'pie',
		  color: '#ff557f'
		}
	]
  };
  
  // 4. 设置图表选项
  chartInstance.setOption(options);
  
  // 5. 添加响应式处理
  window.addEventListener('resize', handleResize);
});

// 生命周期钩子：组件卸载前清理
onUnmounted(() => {
  if (chartInstance) {
    window.removeEventListener('resize', handleResize);
    chartInstance.dispose();
  }
});

// 窗口大小变化时重绘图表
const handleResize = () => {
  chartInstance.resize();
};
</script>